/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {TouchableOpacity, Image} from 'react-native';
import CardStackStyleInterpolator from 'react-navigation-stack/src/views/StackView/StackViewStyleInterpolator';
import theme from '../../src/config/theme';
import {
  createAppContainer,
  createStackNavigator,
  createBottomTabNavigator,
} from 'react-navigation';
import px2dp, {isIphoneX} from '../utils/px2dp';
import HomePage from '../screens/home/index';
import SplashPage from './SplashPage';

const Tabs = createBottomTabNavigator(
  {
    HomePage: {
      screen: HomePage,
      // navigationOptions: {
      //     tabBarLabel: '首页',
      //     tabBarIcon: ({focused, tintColor}) => (
      //         <Image
      //             source={focused ? require('./js/images/tabs/icon_home_p.png') : require('./js/images/tabs/icon_home_n.png')}/>
      //     )
      // }
    },
  },
  {
    tabBarOptions: {
      style: {
        height: 49,
        backgroundColor: '#fff',
        paddingBottom: isIphoneX() ? 22 : 4,
        paddingTop: px2dp(6),
        // paddingBottom: 4,
        borderTopWidth: 0,
        shadowOffset: {width: 0, height: 2},
        shadowOpacity: 0.2,
        shadowRadius: 4,
        shadowColor: theme.primaryColor,
        elevation: 4,
      },
      inactiveTintColor: theme.primaryColor,
      activeTintColor: theme.primaryColor,
      showIcon: true,
    },
    tabBarComponent: (props) => <CustomTabbar {...props} />,
  },
);

let RootStack;
RootStack = createStackNavigator(
  {
    // TabsPage: {
    //   screen: Tabs,
    //   navigationOptions: {
    //     header: null
    //   }
    // },
    HomePage: {
      screen: HomePage,
      navigationOptions: {
        /* title: "首页",
       gesturesEnabled: true*/
        header: null,
      },
    },
  },
  {
    defaultNavigationOptions: ({navigation}) => {
      const {
        state: {routeName},
      } = navigation;

      return {
        gesturesEnabled: true,
        headerBackTitle: null,
        headerStyle: {
          backgroundColor: '#172435',
          borderBottomWidth: 0,
          elevation: 0,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          color: '#fff',
          fontSize: px2dp(48),
        },
        headerLeft: (
          <TouchableOpacity
            style={[
              {
                width: px2dp(120),
                alignItems: 'center',
                justifyContent: 'center',
              },
            ]}
            onPress={() => {
              const {index} = navigation.dangerouslyGetParent().state;
              if (index !== 0) {
                navigation.pop();
              } else {
              }
            }}>
            <Image
              style={{
                resizeMode: 'contain',
                width: px2dp(34),
                height: px2dp(34),
              }}
              source={require('../../src/images/back.png')}
            />
          </TouchableOpacity>
        ),
      };
    },
    transitionConfig: () => ({
      screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    }),
  },
);

const APP1 = createAppContainer(RootStack);

export default APP1;
